<template>
	<view class="content" :style="{paddingTop:menuButtonInfo}" v-if="category.length>0">
		<view class="top">
			<view class="search f_j" @click="go('/pages/search/search')">
				<image src="../../static/index/ss_icon.png" mode=""></image>
				<text>搜索商品</text>
			</view>
			<!-- 分类列表 -->
			<view class="type_box f">
				<scroll-view scroll-x="true" class="type_list" :scroll-into-view='into_view'>
					<view :id="`item${index}`" class="item" v-for="(item,index) in category" :key="index"
						@click="type_check(item,index)">
						<view class="f_d f_j">
							<image :src="item.image" mode="aspectFill"></image>
							<view class="no_name f_z" :class="{name:index==type_index}">
								{{item.name}}
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="more f_d f_j f_z" @click="all_show=true">
					<text>展开</text>
					<image src="../../static/public/down_b.png" mode=""></image>
				</view>
				<!-- 展开更多 -->
				<view class="mask" v-if="all_show" @touchmove.stop.prevent>

				</view>
				<view class="open_all" v-if="all_show" @touchmove.stop.prevent>
					<scroll-view scroll-y="true" style="height: 450rpx;">
						<u-grid :border="false" col='5'>
							<u-grid-item @click='item_click' v-for="(item,index) in category" :key="index"
								:customStyle="{padding:10+'rpx'}">
								<view class="item">
									<image :src="item.image" mode="aspectFill"></image>
									<view class="name f_z">
										{{item.name}}
									</view>
								</view>
							</u-grid-item>
						</u-grid>
					</scroll-view>
					<view class="sq f_z" @click="all_show=false">
						收起
					</view>
				</view>
			</view>
		</view>
		<!-- 商品box -->
		<view class="sp_box f_d">
			<view class="title f_z_b">
				<view class="item f_zj">
					<text>{{category[type_index].children.length>0?category[type_index].children[sp_left].name:'全部'}}</text>
					<view class="more">
					</view>
				</view>
				<view class="item f_zj" @click="sort(1)">
					<text>价格</text>
					<view class="up_down f_d">
						<u-icon name="arrow-up-fill" color="#FF6767" v-if="query_data.min_dl_price=='desc'"
							size="20rpx"></u-icon>
						<u-icon name="arrow-up-fill" color="#909399" v-else size="20rpx"></u-icon>
						<u-icon name="arrow-down-fill" color="#FF6767" size="20rpx"
							v-if="query_data.min_dl_price=='asc'"></u-icon>
						<u-icon name="arrow-down-fill" color="#909399" v-else size="20rpx"></u-icon>
					</view>
				</view>
				<view class="item f_zj" @click="sort(2)">
					<text>销量</text>
					<view class="up_down f_d">
						<u-icon name="arrow-up-fill" color="#FF6767" size="20rpx"
							v-if="query_data.pay_nums=='desc'"></u-icon>
						<u-icon name="arrow-up-fill" color="#909399" size="20rpx" v-else></u-icon>
						<u-icon name="arrow-down-fill" v-if="query_data.pay_nums=='asc'" color="#FF6767"
							size="20rpx"></u-icon>
						<u-icon name="arrow-down-fill" v-else color="#909399" size="20rpx"></u-icon>
					</view>
				</view>
				<!-- <view class="item f_zj">
					<text>折扣</text>
				</view> -->
			</view>
			<view class="list_box f">
				<scroll-view scroll-y="true" class="left">
					<view class="item " @click="sp_left_check(index)" v-for="(item,index) in catlist" :key="index">
						<view class="f_z er" :class="{item_check:index==sp_left}">
							{{item.category_name}}
						</view>
						<view class="san" v-if="index==sp_left">
							<view class="san_item" :class="{san_jh:c_index==san_index}"
								@click.stop="san_click(c_item.id,c_index)" v-for="(c_item,c_index) in item.children"
								:key="c_index">
								{{c_item.category_name}}
							</view>
						</view>
					</view>
				</scroll-view>
				<scroll-view class="right right-scroll" scroll-y :scroll-into-view='list_postion'
					@scroll='right_scroll'>
					<!-- {{goodsList}} -->
					<view class="type_item" v-for="(item,index) in goodsList" :key="index">
						<!-- v-if="item.goods.length>0" -->
						<view>
							<view class="type_title" :id='`item${item.category_id}`' :data-id="item.category_id">
								{{item.category_name}}
							</view>
							<view class="item f" @click="go(`/pages/detail/detail?id=${c_item.id}`)"
								v-for="(c_item,index2) in item.goods" :key="index2">
								<image :src="c_item.image" mode="aspectFill">
								</image>
								<view class="msg f_d f_z_b">
									<view class="title">
										{{c_item.title}}
									</view>
									<view class="gg">
										<text>规格：</text>
										<text class="gg_z" v-for="(gg) in c_item.gg">{{gg}}</text>
									</view>
									<view class="price f_z_b">
										<view class="num">
											<text class="icon">￥</text>
											<text v-if="c_item.gg_count==1">{{c_item.min_dl_price}}</text>
											<text v-else>{{c_item.min_dl_price}}~{{c_item.max_dl_price}}</text>
										</view>
										<image src="../../static/public/add_car.png" mode=""
											@click.stop="item_add(c_item)"></image>
									</view>
								</view>
							</view>
							<view class="item" v-if="item.goods.length==0">
								<u-empty text='该类目没有商品哦~' icon="/static/public/kong.png">
								</u-empty>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 客服悬浮按钮 -->
		<movable-area class="js_movable">
			<movable-view x="350" y="1000" direction="all" class="js_view f_zj">
				<button open-type="contact" class="f_d f_j kf_btn">
					<image src="../../static/public/kf.png" mode=""></image>
					<view class="">
						客服
					</view>
				</button>
			</movable-view>
		</movable-area>

		<!-- 加入购物车弹窗 -->
		<u-popup :show="add_show" :round="10" mode="center" @close="close" :safeAreaInsetBottom='false'
			closeOnClickOverlay>
			<view class="xg">
				<view class="msg f">
					<image :src="detail.image" mode="aspectFill"></image>
					<view class="right f_d f_z_b">
						<view class="title text_ellipsis2">
							{{detail.title}}
						</view>
						<view class="price">
							￥{{detail.multiplejson[gg_index].dl_price}}
						</view>
						<view class="gg">
							已选：{{detail.multiplejson[gg_index].title}}
						</view>
					</view>
				</view>
				<view class="gg_box">
					<view class="gg_title f_z_b">
						<view class="">
							规格
						</view>
						<view class="add_btn f_j">
							<image src="../../static/public/jian_car.png" @click="jian" mode=""></image>
							<view class="nums">
								{{add_car.count}}
							</view>
							<image src="../../static/public/add_car.png" @click="add" mode=""></image>
						</view>
					</view>
					<view class="item_box f f_w">
						<view class="item" @click="check_gg(item,index)" :class="{item_check:index==gg_index}"
							v-for="(item,index) in detail.multiplejson" :key="index">
							{{item.title}}
						</view>
					</view>
					<!-- 价格 -->
					<view class="total f_j">
						<view class="hj">
							<text class="text">合计：</text>
							<text class="num">￥{{total_price.toFixed(1)}}</text>
						</view>
						<view class="btn" @click="join_car">
							加入购物车
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	import { category_list, goods_list_new } from '@/api/page.js'
	import { joinCar } from '@/api/user.js'
	export default {
		computed: {
			...mapState(['menuButtonInfo', 'type_index', 'dl_id'])
		},
		data() {
			return {
				timeout: null,
				all_show: false,
				sp_left: 0,
				sp_san: 0, //上平三级分类
				category: [],
				into_view: '',
				query_data: {
					dl: '',
					category_id: '',
					min_dl_price: 'asc',
					pay_nums: 'desc'
				},
				my_event: '', //滑动对象
				list: [],
				list_postion: '',
				san_index: 0, //三级分类选中index

				add_show: false,
				detail: '', //需要添加购物车的商品
				gg_index: 0,
				add_car: {
					goods_id: '',
					item_name: '',
					count: 1
				},
				gg_price: 0,
				total_price: 0,
				catlist: {},
				goodsList: {}
			}
		},
		onLoad() {
			this.query_data.dl = this.dl_id
			this.get_category_list()
		},
		onShow() {
			// this.san_index = 0
			// this.sp_left = 0
			this.into_view = `item${this.type_index}`
			this.car_deg()
		},
		onShareAppMessage() {

		},
		watch: {
			dl_id(n_val, o_val) {
				console.log(n_val)
				this.query_data.dl = n_val
				this.get_category_list()
			},
			// type_index(n_val, o_val) {
			// 	this.list = []
			// 	if (this.category[this.type_index].children.length > 0) {
			// 		this.query_data.category_id = this.category[this.type_index].children[this.sp_left].id
			// 		this.get_goods_list()
			// 	}
			// }
		},
		methods: {
			...mapMutations(['set_type_index']),
			type_check(item, index) {
				this.san_index = 0
				this.sp_left = 0
				this.set_type_index(index)
				this.list = []
				this.query_data.category_id = item.id
				this.get_goods_list()
			},
			sp_left_check(index) {
				// this.list = []
				this.san_index = 0
				this.sp_left = index
				let id = this.category[this.type_index].children[index]?.children[0].id
				this.list_postion = `item${id}`
				// if (this.category[this.type_index].children.length > 0) {
				// 	this.query_data.category_id = this.category[this.type_index].children[this.sp_left].id
				// 	this.get_goods_list()
				// }
			},
			// 点击宫格
			item_click(e) {
				console.log(e, 'eeeeeeeeeeeeee')
				this.san_index = 0
				this.sp_left = 0
				this.set_type_index(e)
				this.into_view = `item${e}`
				this.all_show = false
				this.list = []
				this.query_data.category_id = this.category[e].id
				this.get_goods_list()
			},
			// 获取分类列表
			get_category_list() {
				category_list().then(res => {
					if (res.code == 1) {
						this.category = res.data
						this.list = []
						this.query_data.category_id = this.category[this.type_index].id
						this.get_goods_list()
						// if (this.category[this.type_index].children.length > 0) {
						// 	this.query_data.category_id = this.category[this.type_index].children[this.sp_left].id
						// 	this.get_goods_list()
						// }
					}
				})
			},

			selectCategory(id) {
				for (const [i, p] of this.catlist.entries()) {
					if (p.children) {
						for (const [j, c] of p.children.entries()) {
							if (c.category_id === id) {
								this.sp_left = i;
								this.san_index = j;
								return
							}
						}
					} else {
						if (p.category_id === id) {
							this.sp_left = i;
							return;
						}
					}
				}
			},

			right_scroll(e) {
				const { offsetTop } = e.currentTarget;
				uni.createSelectorQuery()
					.select('.right-scroll')
					.fields({ size: true },
						({ height }) => {
							uni.createSelectorQuery()
								.selectAll('.type_title')
								.fields({
										dataset: true,
										rect: true,
										size: true
									},
									(res) => {
										for (let i = 0; i < res.length; i++) {
											const last = res[i];
											if (last.top >= offsetTop) {
												if (last.top >= offsetTop + height) {
													this.selectCategory(res[i - 1].dataset.id);
													break;
												} else {
													this.selectCategory(last.dataset.id);
													break;
												}
											}
										}
									}
								)
								.exec();
						}
					)
					.exec();
				this.my_event = e
				uni.$u.debounce(this.j_s, 200)
			},
			j_s() {
				let height = 0
				// 获取每个三级分类块距离顶部的距离
				this.goodsList.forEach((item, index) => {
					this.$u.getRect(`#item${item.category_id}`).then(res => {
						if (res.top <= 101) {
							console.log(res.id, 'resresres')
						}
					})
				})
			},
			// 排序方式
			sort(type) {
				if (type == 1) { //价格排序
					if (this.query_data.min_dl_price == 'desc') {
						this.query_data.min_dl_price = 'asc'
					} else {
						this.query_data.min_dl_price = 'desc'
					}
				} else { //销量排序
					if (this.query_data.pay_nums == 'desc') {
						this.query_data.pay_nums = 'asc'
					} else {
						this.query_data.pay_nums = 'desc'
					}
				}
				this.get_goods_list()
			},
			// 获取商品列表
			get_goods_list() {
				console.log(this.query_data, "=======")
				// this.query_data.category_id = 1
				goods_list_new(this.query_data).then(res => {
					if (res.code == 1) {
						this.catlist = res.data.category
						this.goodsList = res.data.data
						// this.list = res.data
					}
				})
			},
			// 三级分类点击
			san_click(index, jh) {
				this.list_postion = `item${index}`
				this.san_index = jh
			},
			// 添加购物车按钮
			item_add(item) {
				console.log(item)
				this.detail = item
				this.add_show = true
				this.gg_index = 0
				this.add_car.goods_id = item.id
				this.add_car.count = 1
				this.add_car.item_name = item.multiplejson[0].title
				this.hj()
			},
			close() {
				this.add_show = false
			},
			// 选择规格
			check_gg(item, index) {
				this.gg_index = index
				this.add_car.item_name = item.title
				this.add_car.count = 1
				this.hj()
			},
			// 数量加减
			jian() {
				if (this.add_car.count > 1) {
					this.add_car.count -= 1
					this.hj()
				}
			},
			add() {
				if (this.add_car.count >= this.detail.multiplejson[this.gg_index].inventory) {
					this.me_show_toast('库存不足')
				} else {
					this.add_car.count += 1
					this.hj()
				}

			},
			// 合计计算
			hj() {
				let price = this.detail.multiplejson[this.gg_index].dl_price * 1
				let num = this.add_car.count
				this.total_price = price * num
			},
			join_car() {
				joinCar(this.add_car).then(res => {
					if (res.code == 1) {
						uni.setTabBarBadge({
							index: 2,
							text: '1'
						})
						this.add_show = false
					}
					this.me_show_toast(res.msg)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: rgba(246, 240, 238, 1);
		// filter: blur(66.16072082519531px);
		background: linear-gradient(to bottom, rgb(246, 240, 238) 0%, rgb(255, 255, 255) 60%);

		.mask {
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			width: 100vw;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.3);
			z-index: 999999;
		}

		.top {
			padding-right: 0rpx;

			.search {

				margin-left: 30rpx;
				background: #FFFFFF;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				width: 450rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				padding: 18rpx 22rpx;
				box-sizing: border-box;

				image {
					margin-right: 20rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}

			.type_box {
				position: relative;
				padding: 0rpx 30rpx;
				padding-right: 0rpx;

				.open_all {
					z-index: 999999;
					width: 100%;
					background: linear-gradient(to bottom, rgb(246, 240, 238) 0%, rgb(255, 255, 255) 50%);
					position: absolute;
					top: 0rpx;
					left: 0rpx;
					padding: 30rpx;
					box-sizing: border-box;
					border-radius: 0rpx 0rpx 40rpx 40rpx;

					.item {
						// margin-bottom: 15rpx;

						image {
							width: 96rpx;
							height: 96rpx;
						}



						.name {
							margin-top: 20rpx;
							font-weight: 400;
							font-size: 22rpx;
							color: #3D3D3D;
						}
					}

					.sq {
						padding-top: 15rpx;
						font-weight: 250;
						font-size: 24rpx;
						color: #3D3D3D;
					}
				}
			}

			.type_list {
				margin-top: 30rpx;
				white-space: nowrap;
				width: 90%;

				.item {
					display: inline-block;
					margin-right: 30rpx;

					image {
						width: 96rpx;
						height: 92rpx;
						vertical-align: bottom;
					}

					.no_name {
						font-weight: 400;
						font-size: 22rpx;
						color: #3D3D3D;
						padding: 4rpx 20rpx;
						margin-top: 10rpx;
					}

					.name {
						margin-top: 10rpx;
						background: #FF3434;
						border-radius: 406rpx 406rpx 406rpx 406rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #FFFFFF;
						padding: 4rpx 20rpx;
					}
				}
			}

			.more {
				flex: 1;

				text {
					writing-mode: vertical-rl;
					font-weight: 250;
					font-size: 24rpx;
					color: #232323;
				}

				image {
					margin-top: 30rpx;
					width: 11rpx;
					height: 7rpx;
				}
			}
		}

		.sp_box {
			width: 100%;
			// height: 80vh;
			background-color: #FFFFFF;
			margin-top: 30rpx;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			box-sizing: border-box;
			padding-top: 20rpx;

			.title {
				.item {
					width: 25%;
					font-weight: 250;
					font-size: 32rpx;
					color: #232323;

					.up_down {
						margin-left: 10rpx;

						.up {
							margin-bottom: 15rpx;
						}

						image {
							width: 9rpx;
							height: 5rpx;
						}
					}

					// position: relative;


					.more {
						position: absolute;
						bottom: 0rpx;
						left: 0rpx;
					}
				}
			}

			.list_box {
				margin-top: 20rpx;
				flex: 1;

				.left {
					background: #F7F8FA;
					height: 70vh;
					width: 180rpx;

					.item {
						// padding: 30rpx 0rpx;
						// margin-bottom: 30rpx;
						font-weight: 250;
						font-size: 28rpx;
						color: #000000;

						.er {
							padding: 15rpx 0rpx;
						}

						.san {
							width: 96%;
							margin: 0 auto;
							background: #FFFFFF;
							box-shadow: 0rpx 27rpx 51rpx 0rpx rgba(0, 0, 0, 0.3);
							border-radius: 0rpx 0rpx 20rpx 20rpx;

							.san_item {
								text-align: center;
								box-sizing: border-box;
								padding: 15rpx 0rpx;
								font-weight: 250;
								font-size: 28rpx;
								color: #000000;
							}

							.san_jh {
								color: #FF6767;
							}
						}
					}

					.item_check {
						background: #FF6767;
						font-weight: 400;
						font-size: 28rpx;
						color: #FFFFFF;
					}
				}

				.right {
					flex: 1;
					height: 70vh;
					background: #FFFFFF;

					.type_item {
						.type_title {
							background-color: #F7F8FA;
							padding: 20rpx;
							font-size: 24rpx;
						}
					}

					.item {
						padding: 20rpx;

						image {
							width: 160rpx;
							height: 160rpx;
						}

						.msg {
							flex: 1;
							margin-left: 20rpx;

							.title {
								font-weight: 600;
								font-size: 30rpx;
								color: #232323;
							}

							.gg {
								font-weight: 250;
								font-size: 24rpx;
								color: #3D3D3D;

								.gg_z {
									margin-right: 10rpx;
								}
							}

							.price {
								.num {
									font-weight: 400;
									font-size: 36rpx;
									color: #FB3C0D;

									.icon {
										font-size: 28rpx;
									}
								}

								image {
									width: 46rpx;
									height: 46rpx;
								}
							}
						}
					}
				}
			}
		}

		.xg {
			width: 650rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.msg {
				image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
				}

				.right {
					flex: 1;
					margin-left: 15rpx;

					.title {
						font-weight: 400;
						font-size: 28rpx;
						color: #232323;
					}

					.price {
						font-weight: 400;
						font-size: 32rpx;
						color: #FF3767;
					}

					.gg {
						font-weight: 250;
						font-size: 24rpx;
						color: #666666;
					}
				}
			}

			.gg_box {
				.gg_title {
					margin-top: 40rpx;
					margin-bottom: 40rpx;
					font-weight: 250;
					font-size: 28rpx;
					color: #232323;

					.add_btn {
						.nums {
							text-align: center;
							width: 100rpx;
							font-weight: 250;
							font-size: 28rpx;
							color: #232323;
						}

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}

				.item_box {
					.item {
						margin-right: 24rpx;
						margin-bottom: 24rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #232323;
						padding: 14rpx 44rpx;
						background: rgba(35, 35, 35, 0.06);
						border-radius: 59rpx 59rpx 59rpx 59rpx;
					}

					.item_check {
						background: rgba(238, 65, 51, 0.1) !important;
						color: #EE4133 !important;
					}
				}

				.total {
					justify-content: flex-end;
					margin-top: 30rpx;

					.hj {
						font-weight: 250;
						font-size: 28rpx;
						color: #232323;

						.num {
							font-weight: 400;
							font-size: 34rpx;
							color: #FF3767;
						}
					}

					.btn {
						margin-left: 30rpx;
						padding: 18rpx 44rpx;
						background: #313132;
						border-radius: 35rpx 35rpx 35rpx 35rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>